<template>
	<view >
		<view class="topbg"></view>
		<view style="margin-top:5rpx;">
		<view class="title" >
			<text class="titles">{{ititle}}</text>
		<view  class="search" >
		
		<view @tap="search" style="margin-top:14rpx;margin-left: 20rpx;color:#525298;" class="iconfont">&#xe620; 输入关键词搜索...</view>
		<view @tap="ptjilu" style="margin-top: -50rpx;margin-left: 650rpx;color:#525298;font-size: 50rpx;" class="iconfont">&#xe7eb;</view>
		</view>
		</view>
		<view class="swipertop" >
		<swiper class="swiper" :circular="true" :indicator-dots="true" :autoplay="true" :interval="3000"
			:duration="300">
			<swiper-item v-for="item in lunbo" class="swiper-item" @tap="lunbotap(item)">
				<image :src="url + item.img"></image>
			</swiper-item>
		</swiper>
		</view>
		</view>
		<view class="icon2 icon row " style="margin-top: -20rpx;">
			<view @tap="iqiyis()" class="toph">
				<image src="../../static/font/iqiyi.png" mode=""></image>
				<text class="font">爱奇艺</text>
			</view>
			<view @tap="qq()" class="toph">
				<image src="../../static/font/qq.png" mode=""></image>
				<text class="font">腾讯视频</text>
			</view>
			<view @tap="youkus()" class="toph">
				<image src="../../static/font/youku.png" mode="" ></image>
				<text class="font">优酷视频</text>
			</view>
			<view @tap="ntourl('../list/list')" class="toph">
				<image src="../../static/font/duanju.png" mode=""></image>
				<text class="font">视频短剧</text>
			</view>
		</view>

     <view class="fenge"></view>
	 
	
	   
     <view style="margin: 20rpx;margin-top: 20rpx;">
		 <text class="font" style="font-size:32rpx;font-weight: 700;">热门推荐</text> 
	 </view>
		<view class="listvs row" >
			<view class="lists" v-for="(item,indexa) in hot" :key="item.id" @tap="play(item)">
				<image :src="url+item.img" mode="aspectFill"></image>
					<view style="margin: 10rpx;">
					<text class="tagtag">{{item.title}}</text>
					<view style="margin-top: 5rpx;">
					<view style="margin-top: 20rpx;">
						<text class="text">{{item.text}}</text>
					</view>
					</view>
					</view>
				</view>
		</view>		
     <view class="fenge"></view>	
     <view style="margin: 20rpx;margin-top: 20rpx;">
		 <text class="font" style="font-size:32rpx;font-weight: 700;">爱奇艺精选</text> 
	 </view>
		<view class="listv row" >
			<view class="list" v-for="(item,indexa) in iqiyi" :key="item.id" @tap="play(item)">
				<image :src="url+item.img" mode="aspectFill"></image>
					<view style="margin: 10rpx;">
					<text class="tagtag">{{item.title}}</text>
					<view style="margin-top: 5rpx;">
					<view style="margin-top: 20rpx;">
						<text class="text">{{item.text}}</text>
					</view>
					</view>
					</view>
				</view>
		</view>
		
     <view class="fenge"></view>	
     <view style="margin: 20rpx;margin-top: 20rpx;">
		 <text class="font" style="font-size:32rpx;font-weight: 700;">腾讯视频精选</text> 
	 </view>
		<view class="listv row" >
			<view class="list" v-for="(item,indexa) in tengxun" :key="item.id" @tap="play(item)">
				<image :src="url+item.img" mode="aspectFill"></image>
					<view style="margin: 10rpx;">
					<text class="tagtag">{{item.title}}</text>
					<view style="margin-top: 5rpx;">
					<view style="margin-top: 20rpx;">
						<text class="text">{{item.text}}</text>
					</view>
					</view>
					</view>
				</view>
		</view>

     <view class="fenge"></view>	
     <view style="margin: 20rpx;margin-top: 20rpx;">
		 <text  class="font"  style="font-size:32rpx;font-weight: 700;">优酷精选</text> 
	 </view>
		<view class="listv row" >
			<view class="list" v-for="(item,indexa) in youku" :key="item.id" @tap="play(item)">
				<image :src="url+item.img" mode="aspectFill"></image>
					<view style="margin: 10rpx;">
					<text class="tagtag">{{item.title}}</text>
					<view style="margin-top: 5rpx;">
					<view style="margin-top:20rpx;">
						<text class="text">{{item.text}}</text>
					</view>
					</view>
					</view>
				</view>
		</view>
		

			   
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hot:[],
				lunbo:[],
				iqiyi:[],
				tengxun:[],
				youku:[],
				ititle:'',
				guochan:'',
				japan:'',
				av:'',
				chinese:'',
				oumei:'',
				suren:'',
				dongman:'',
				wanghong:'',
				sanji:'',
				yinghua:'',
				load:false
				
			}
		},
		computed: {
			user(){
				return this.$store.state.userinfo;
			}
		},
		onLoad() {
			this.GetJson(this.ip + 'setapp.php','POST', {}, e => {
			this.ititle = e.ititle
			})
			//#ifdef H5
			uni.getStorage({
				key:'userinfo',
				success: (e) => {
					let sign = this.md5(e.data.token);
					this.GetJson(this.ip + 'userinfo.php','POST',{
						token:e.data.token,
						sign:sign
					},e=>{
						if(e.code == 405 || e.userinfo == null || e.userinfo == ''){
							uni.removeStorage({key:'ulogin'})
							uni.reLaunch({url:'../login/login'})
						}
						if(this.isdata(e)){
							this.$store.state.userinfo = e.userinfo;
							this.$store.state.account = e.account;//提现账户
							this.$store.state.follow = e.follow;
							this.$store.state.dianzan = e.dianzan;
							this.$store.state.integral = e.integral;
					       this.user = e.userinfo;
					       this.integral = e.integral;
					       this.follow = e.follow;
					   }
					})
				}  
			})
			//#endif
			this.getdata(); 
			uni.getStorage({
				key:'maindata',
				success: (e) => {
					this.lunbo = e.data.lunbo;
					this.iqiyi = e.data.iqiyi;
					this.tengxun = e.data.tengxun;
					this.youku = e.data.youku;
					this.$nextTick(function(){
						plus.navigator.closeSplashscreen();
					})
				}  
			})
		
		uni.$on('getgengxin',es=>{
			if(es === true)this.showload();
			//console.log(es)
			this.GetJson(this.ip + 'appup.php','GET',{},e=>{
				if(es === true)this.hideload();
				if(e.data.edition != plus.runtime.version){//有新版本
					
					  if(e.data.ios!='' && uni.getSystemInfoSync().platform == 'ios'){
						uni.setStorageSync('upapp',e.data)
						uni.navigateTo({
							url:'../gengxin/gengxin' 
						})
						uni.$once('upapp',(is)=>{
							if(uni.getSystemInfoSync().platform == 'ios'){
								if(e.data.ios!=null || e.data.ios !=''){
									plus.runtime.openURL(e.data.ios);
								}
							}else{
								this.down(e.data.android);
								this.showToast('已进入后台下载...');
							}
						}) 
						}
						if(e.data.android!='' && uni.getSystemInfoSync().platform != 'ios'){
							uni.setStorageSync('upapp',e.data)
							uni.navigateTo({
								url:'../gengxin/gengxin'
							})
							uni.$once('upapp',(is)=>{
								if(uni.getSystemInfoSync().platform == 'ios'){
									if(e.data.ios!=null || e.data.ios !=''){
										plus.runtime.openURL(e.data.ios);
									}
								}else{
									this.down(e.data.android);
									this.showToast('已进入后台下载...');
								}
							})
						}
					
				}else if(es === true){
					this.showToast('当前版本已是最新版本');
				}
				
			})
		})
		//WGT更新
		plus.runtime.getProperty( plus.runtime.appid, (wgtInfo) => {
			this.appVersion= wgtInfo.version 
		})
		this.GetJson(this.ip + 'appup.php','GET',{},e=>{
			if(e.data.wgtedition != this.appVersion){//有新版本
			   if(uni.getSystemInfoSync().platform == 'ios'){
				   if(e.data.wgtios!='' || e.data.wgtios!=null){
					   let wgt = e.data.wgtios;
					   this.downwgt(wgt);
				   }
				}else{
					if(e.data.wgtandroid!='' || e.data.wgtandroid!=null){
						let wgt = e.data.wgtandroid;
						this.downwgt(wgt);
					}
				}
			}
		})
		 
		//wgt更新结束
		//console.log(plus.runtime.version)	
		},
		onReady() {
			uni.$emit('getgengxin',false);
		},
		methods: {
			onadload(e) {
			      console.log('广告数据加载成功');
			    },
			    onadclose(e) {
					 console.log("onadclose",e);
			    },
			    onaderror(e) {
			      // 广告加载失败
			      console.log("onerror: ", e.detail);
			    },
			iqiyis(){
				uni.navigateTo({
					url: '../tool/jiexi/page?url=https://m.iqiyi.com'
				})
			},
			qq(){
				uni.navigateTo({
					url: '../tool/jiexi/page?url=https://m.v.qq.com'
				})
			},
			youkus(){
				uni.navigateTo({
					url: '../tool/jiexi/page?url=https://m.youku.com'
				})
			},
			ptjilu(){
				uni.navigateTo({
					url: '../tool/jiexi/ptrecord',
					animationType:'fade-in'
				})
			},
			down(url){
				if(url.indexOf('http') !== -1){
					const downloadTask = uni.downloadFile({url:url,success: (res) => {
						plus.runtime.install(res.tempFilePath,{force:true});
					   }
					})
				    downloadTask.onProgressUpdate((e) => {
						this.downnum = e.progress;
						uni.$emit('sendNum', {
						    data:e.progress
						});
					})
					
				}
			},
			downwgt(path){
				if(path.indexOf('http') !== -1){
				      uni.downloadFile({url:path,success: (res) => {
			          plus.runtime.install(res.tempFilePath,{force:true}, function(widgetInfo) {
				      plus.runtime.restart();
			        }, function(e) {
				  });
			    }
			  })
			}
			},
			getdata(is) {
				this.load = true;
				this.GetJson(this.ip+'indexlist.php', 'POST', {}, e => {
					this.lunbo = e.lunbo;
					this.iqiyi = e.iqiyi;
					this.tengxun = e.tengxun;
					this.youku = e.youku;
					this.hot = e.hot;
					this.load = false;
					uni.stopPullDownRefresh();
					if(!plus.navigator.hasSplashscreen())plus.navigator.closeSplashscreen();
					uni.setStorage({
						key:'maindata',
						data:e
					})
				})
			},
			play(item){
				if(item.video==1){
					uni.navigateTo({
						url: '../tool/jiexi/page?url='+item.url
					})
				}else{
					uni.navigateTo({
						url: '../tool/jiexi/jiekou?url='+item.url +'&title='+item.title+'&text='+item.text
					})
				}
				
			},
			plays(item){
				if(item.vod_points_play !=0){
				uni.showModal({
				    title: '提示',
				    content: '本视频需要花费'+item.vod_points_play+'个钻石才能观看！点击确定将自动扣除'+item.vod_points_play+'个钻石，并且为您播放视频，是否继续？',
				    success: function (res) {
				        if (res.confirm) {
				            console.log('用户点击确定');
							uni.navigateTo({
								url: '../play/play?data='+ item + '&zuanshi='+item.vod_points_play + '&play='+ item.vod_play_url +'&playname=' + item.vod_name + '&playimg=' + item.vod_pic + '&playtime=' + item.vod_remarks + '&playclass=' + item.vod_class + '&id=' + item.vod_id
							})
							
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
				}else{
					uni.navigateTo({
						url: '../play/vplay?data='+ item 
						+ '&play='+ item.vod_play_url 
						+'&playname=' + item.vod_name 
						+ '&playimg=' + item.vod_pic 
						+ '&playtime=' + item.vod_remarks 
						+ '&playclass=' + item.vod_class 
						+ '&id=' + item.vod_id
						+'&text='+item.vod_blurb
						+'&yanyuan='+item.vod_actor
						+'&daoyan='+item.vod_director
						+'&diqu='+item.vod_area
						+'&nianfen='+item.vod_year
						+'&pingfen='+item.vod_score
					})
					}	
			},
			ntourl(item) {
				uni.navigateTo({
					url: item
				})
			},
			lunbotap(item){
				plus.runtime.openWeb(item.url);
			},
			search(){
				uni.navigateTo({
					url:'../sou/soupt',
					animationType:'fade-in'
				})
			}
		},
		onNavigationBarButtonTap(e) {
			console.log(e);
			if (e.index < 2) {
				uni.navigateTo({
					url:'../msg/msg',
					animationType:'fade-in'
				})

			}else{
				uni.navigateTo({
					url:'../msg/msg',
					animationType:'fade-in'
				})
			}
		},
		onPullDownRefresh() {
			this.getdata(true);
		},
		onReachBottom() {
			if(this.load = false)this.getdata('is')
		
		}
	}
</script> 

<style>
	page{
		background-color: #181b2e;
		
	}
	.text{
		color: #6A5ACD;
		font-weight: 400;
		margin-top: 20rpx;
		font-size: 26rpx;
		display: block;
		margin-top: -15rpx;
		display: flex;
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp:1;
		-webkit-box-orient: vertical;
		opacity: .7;
	}
	.font{
			background-image: linear-gradient(to right ,#5a18d1,#9B63FF);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
	}
	.fonts{
			background-image: linear-gradient(to right ,#9650bb,#9650bb);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
	}
	.vname{
		background-image: linear-gradient(to right ,#ff8870,#dea5fc);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	.topbg{
		position: fixed;left: 0;right: 0;top: 0;z-index: 2;
		border-radius: 0rpx 0rpx 30rpx 30rpx;
		background: linear-gradient(45deg,#181b2e,#181b2e,#181b2e);
		width: 750rpx;
		
		/*#ifdef H5 */
		height:220rpx;
		/*#endif*/
		/*#ifdef APP-PLUS*/
		height:250rpx;
		/*#endif*/
	}
	.title{
		/*#ifdef H5 */
		margin-top: -20rpx;
		/*#endif*/
		width: 750rpx;height: 170rpx;position: fixed;left: 0;right: 0;top: 0;z-index: 2;
	}
	.titles{
		padding-top:1rpx;
		margin: 20rpx;
		font-size: 35rpx;
		font-weight: 800;
		line-height:220rpx;
		background-image: linear-gradient(to right ,#d71af9,#f9c71a);
		-webkit-background-clip: text; 
		-webkit-text-fill-color: transparent;
	}
	.search{
		background-color:rgba(0,0,0,0.2);
		border-radius: 50rpx;
		margin: 20rpx; 
		height:70rpx;
		width: 620rpx;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 1;
		/*#ifdef H5 */
		margin-top: 130rpx;
		/*#endif*/
		/*#ifdef APP-PLUS*/
		margin-top: 160rpx;
		/*#endif*/
	}
	.swipertop{
		/*#ifdef H5 */
		margin-top: 220rpx;
		/*#endif*/
		/*#ifdef APP-PLUS*/
		margin-top: 270rpx;
		/*#endif*/
	}
	.imgs{
		margin: 22rpx; height: 50rpx;width: 50rpx;margin-left: 5rpx;margin-top: 8rpx;
	}
	.swiper {
		
		height: 300rpx;
		margin: 20rpx;
	}

	.swiper-item>image {
		width: 700rpx;
		height: 300rpx;
		border-radius: 10rpx;
		margin-left: 8rpx;
		background-color: #f3f1f1;
	}
	.hot{
		background-image: linear-gradient(to right ,#5a18d1,#b68dfe);
		padding: 3rpx 8rpx;
		border-radius: 10rpx;
		font-size: 20rpx;
		color: #FFFFFF;
		/*margin-left: 10rpx;*/
		margin-top: 10rpx;
	}

	.fenge{
		text-align: center;
		border-radius: 1rpx 0rpx 0rpx 1rpx;
		width: 750rpx; 
		color:#FFFFFF;
		background-color: #1c1f35;
		height: 20rpx;
	}

    .icon{
		margin-top: 40rpx;
		height: 180rpx;
	}

	.jsname{
		font-size: 25rpx;
		margin-top: 20rpx;
		line-height: 70rpx;
	}

	.times{
		float:right; 
		font-size: 28rpx;
		line-height: 70rpx;
	}
	.tagtag{
		background-image: linear-gradient(to right ,#ff8870,#dea5fc);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		font-weight: 500;
		font-size: 30rpx;
		display: block;
		margin-top: 10rpx;
		display: flex;
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		opacity: .7;

	}
    
	.iconflist {
		
		height: 80rpx;
		border: 1rpx solid #FFFFFF;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		justify-content: space-around;
		margin-top: -5rpx;
		
	}

	.iconflist>view {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.iconflist>view>image {		
		width: 30rpx;
		height: 30rpx;
		margin-right: 12rpx;
	}

	.iconflist>view>text {
	
		font-size: 26rpx;
	}

	.icon2 {
		padding: -20rpx;
	    justify-content: space-around;
	}

	.icon2>view {
		margin-top: -20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.icon2>view>image {
		width: 70rpx;
		height: 70rpx;
		display: block;
		margin-bottom: 22rpx;
	}

	.icon2>view>text {
		font-size: 30rpx;
	}

	.listv {
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 20rpx;
	}

	.list {
		margin-top: 20rpx;
		/*box-shadow: 8rpx 4rpx 8rpx 4rpx rgba(0, 0, 0, 0.05);*/
		
		width: 347rpx;
	}

	.list>image {
		width: 347rpx;
		height: 450rpx; 
		border-radius: 5rpx;
		background-color: #f3f1f1;
		box-shadow: 5px 10px 10px rgba(0, 0, 0, .5);
	}

	

	.listvs{
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 20rpx;
	}

	.lists {
		margin-top: 20rpx;
		width: 347rpx;
	}

	.lists>image{
		width: 347rpx;
		height: 200rpx; 
		border-radius: 5rpx;
		background-color: #f3f1f1;
		box-shadow: 5px 10px 10px rgba(0, 0, 0, .5);
	}

	

</style>
